<script setup lang="ts">
interface DialogProps {
	visible: boolean
	title?: string | null
	height?: number
	width?: number
	showCancel?: boolean
	showConfirm?: boolean
	showFooter?: boolean
}

const props = withDefaults(defineProps<DialogProps>(), {
	visible: false,
	title: null,
	height: 280,
	width: 630,
	showCancel: true,
	showConfirm: true,
	showFooter: true,
})

const emit = defineEmits(["onClose", "onConform"])

const onClose = () => {
	emit("onClose")
}

const onConform = () => {
	emit("onConform")
}
</script>

<template>
	<el-dialog
		:model-value="props.visible"
		:title="props.title"
		:width="props.width + 'px'"
		:before-close="onClose"
		append-to-body
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:style="{ '--header-padding': props.title !== null ? '10px' : '20px' }"
	>
		<div class="container" :style="{ height: props.height + 'px' }">
			<slot name="content"></slot>
		</div>
		<template #footer v-if="props.showFooter">
			<div class="dialog-footer">
				<el-button v-if="props.showCancel" @click="onClose">取消</el-button>
				<el-button v-if="props.showConfirm" type="primary" @click="onConform">确定</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<style lang="scss">
.container {
	overflow-x: inherit;
	overflow-y: auto;
}

.el-dialog {
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
	padding: 0;

	.el-dialog__header.show-close {
		margin-right: 0;
		border-top-left-radius: 8px !important;
		border-top-right-radius: 8px !important;
		background-color: var(--el-color-primary) !important;
		//padding: 20px;
		padding: var(--header-padding);

		.el-dialog__title {
			color: #fff;
			font-size: 16px;
			font-weight: 600;
		}
	}

	.el-dialog__headerbtn .el-dialog__close {
		color: #fff;
	}

	.el-dialog__body {
		padding: 10px;
	}

	.el-dialog__footer {
		border-top: 1px solid #e8eaec !important;
		padding: 10px;
	}
}
</style>
